<template>
  <div class="backlog-item">
    <div class="icon" v-bind:style="{ background: primaryColor }">
      <i :class="['change', 'iconfont', icon]" />
    </div>
    <div class="title">{{ title }}</div>
    <div class="bottom">
          <span class="spanlabel">新增</span>
          <span class="spanValue">{{ leftVal }}</span>
          <span class="spanlabel">待审核</span>
          <span class="spanValue" v-bind:style="{ color: primaryColor }">{{ rightVal }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'backlogItem'
})
export default class extends Vue {
  @Prop({ default: '' }) private icon!: string
  @Prop({ default: '#0076FF' }) private primaryColor!: string
  @Prop({ default: '' }) private title!: string
  @Prop({ default: '0' }) private leftVal!: string
  @Prop({ default: '0' }) private rightVal!: string
}
</script>

<style lang="scss" scoped>
@import 'index';
</style>
